<template>
  <el-row class="myheader">
    <el-col :span="7">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="(i, index) in indexPath" :key="index">{{i}}</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
     <el-col :span="5">
      [ {{projectName}} ]
    </el-col>
    <el-col :span="10">
      <label class="header-author" v-if="document.author">
        创建人：{{document.author}} 创建时间：{{document.createDate}} 更新人：{{document.updater}} 更新时间：{{document.updateDate}}
      </label>
      <label class="header-author" v-else>
        模板文档
      </label>
    </el-col>
    <el-col :span="2">
      <div class="login-user">
        <el-dropdown @command="handleCommand">
          <el-tag>{{loginUser}}</el-tag>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="selfInfo">个人设置</el-dropdown-item>
            <el-dropdown-item command="logout">退出登陆</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { getNickName, removeToken } from "../../util/auth";

export default {
  name: "myHeader",
  data: function() {
    return {};
  },
  computed: {
    projectName(){
      return this.$store.state.header.project.name;
    },
    loginUser() {
      return getNickName();
    },
    indexPath() {
      let urls = this.$store.state.header.indexPath;
      let catalogs = this.$store.state.catalog.catalogs;
      let names = new Array();
      for (var i = 0; i < urls.length; i++) {
        for (var j = 0; j < catalogs.length; j++) {
          if (urls[i] === catalogs[j].url) {
            names.push(catalogs[j].name);
            catalogs = catalogs[j].children;
            break;
          }
        }
      }
      return names;
    },
    document() {
      return {
        author: this.$store.state.mdedit.author,
        createDate: this.$store.state.mdedit.createDate,
        updater: this.$store.state.mdedit.updater,
        updateDate: this.$store.state.mdedit.updateDate
      };
    }
  },
  methods: {
    handleCommand(command) {
      if (command === "logout") {
        removeToken();
        this.$router.push({ path: "login" });
      }else{
        alert("开发中。。。");
      }
    }
  }
};
</script>

<style scoped>
.myheader {
  height: 100%;
  display: flex;
  align-items: center;
}

.login-user {
  float: right;
}

.header-author {
  font-size: 13px;
  color: lightgray;
}
</style>
